<template>
  <div class="course-use">
    <!--    loading-page     -->
    <loading-page @after-loading-page="playAgain"
                  background-color="https://fangti-mcdn.oss-cn-beijing.aliyuncs.com/appstatic/background/Bitmap.png"
                  fn="playAgain"
                  img="pic_sutdy@2x.png">


      <div class="course-use-detail">
        <nav-bar
          class="nav-bar-position"

        >学以致用 {{ current + 1 > lessonDetail.info.length ? lessonDetail.info.length :current + 1 }} /
          {{lessonDetail.info.length}}
        </nav-bar>
        <white-space/>

        <div class="course-use-progress-wrap">
          <div :class="'bean-width-'+lessonDetail.count * 2" class="course-use-progress">
            <div
              :class=" ['bean-'+(index+1) ,{'gray-filter': progress * 2 - 1 < index && bean_current * 2 - 1  < index }]"
              :key="index" class="icon-wrap"
              v-for="(bean,index) in lessonDetail.count * 2">
              <my-img class-name="ico-beans" src="ico_beans@2x.png"/>
            </div>
          </div>
        </div>


        <div class="poster-wrap">
          <div class="center-wrap">
            <div class="poster">
              <my-img class-name="use-poster" :src="lessonDetail.info[current].picture" v-if="currentPlayState !== 'video'"/>
              <video
                :controls="false"
                :enable-progress-gesture="false"
                :show-fullscreen-btn="false"
                :show-play-btn="false"
                :show-center-play-btn="false"
                :show-progress="false"
                :src="lessonDetail.info[current].video"
                :poster="lessonDetail.info[current].picture"
                @ended="videoEnded"
                @play="videoPlay"
                :class="['use-poster',{hide:currentPlayState !== 'video'}]"
                id="myVideo"></video>
              <div class="footer">
                <my-img @tap="playAgain({isAutoPlay:false})" class="again" src="again10_23.png"
                        v-if="currentRecordIsFinish"/>
              </div>
            </div>
          </div>
        </div>

        <record @next="_playNextVoice"/>


      </div>

      <div
        :animation="animation"
        :style="{'z-index':!animationShow?'-199999':'999999999999999999'}"
        class="b-start"
      >
        <my-img
          :src="'b123.gif?' + current"
          class-name="b-start-png"
          v-if="!isAnimationEnd && animationShow"
        />
        <my-img
          :src="'get_bean.gif?' + current"
          class-name="btn-rec-ico fiddle"
          v-else-if="isAnimationEnd && animationShow"
        />
      </div>

      <loading/>
    </loading-page>
  </div>

</template>

<script>
  import { mapActions, mapState } from 'vuex';
  import Fiddel from '../../component/fiddle/fiddle';
  import LoadingPage from "../../component/loading-page/loading-page";
  import Record from "../../component/record/record";

  export default {
    name: "course_use",
    data() {
      return {
        videoContext: '',
        progress: '',
      }
    },
    components: {
      Record,
      LoadingPage,
      Fiddel
    },
    computed: {
      ...mapState('Course', ['lessonDetail', 'lessonList']),
      ...mapState('Tools', ['isAnimationEnd', 'animationShow', 'animation', 'currentRecordIsFinish','currentPlayState' ,'current', 'bean_current'])
    },
    methods: {
      ...mapActions('Course', ['reqLessonDetail', 'reqCompleteTask']),
      ...mapActions('Tools', ['playRecord', 'playNextVoice', 'videoEnded','saveVideoContext', 'videoPlay', 'playVideo','stopPlay']),

      _playNextVoice() {
        this.playNextVoice({ target: this, count:this.lessonDetail.count * 2})
      },

      playAgain({ isAutoPlay } = { isAutoPlay: true }) {
        this.playVideo({ videoContext: this.videoContext, isAutoPlay })
      }

    },

    async onLoad(query) {
      const { id, type_id, progress } = query;
      this.id = id;
      this.type_id = type_id;
      this.progress = progress;
      await this.reqLessonDetail({ id, type_id });
    },

    onReady (res) {
      this.videoContext = uni.createVideoContext('myVideo');
      this.saveVideoContext({videoContext:uni.createVideoContext('myVideo')})
    },

    onUnload() {
      this.videoEnded();
      this.stopPlay();
    }
  }
</script>

<style lang="scss">
  @import "../../uni";

  .course {
    &-use {
      &-detail {
        background: #fff;
      }

      &-wrap {
        background-color: #45D5C0;
        min-height: 100vh;
      }

      &-loading-pic {
        width: 100vw;
        height: upx(1334);
      }

      .course-use-progress-wrap {
        width: 100vw;
        height: upx(70);
        z-index: 99999999999;
        position: fixed;
        background: linear-gradient(-309deg, #46DBB4 0%, #3BB6BC 100%);
      }

      &-progress {
        position: relative;
        top: upx(20);
        left: 0;
        right: 0;
        margin: auto;
        background: white;
        box-shadow: 0 upx(4) upx(28) 0 rgba(122, 137, 130, 0.18);
        border-radius: upx(200);
        display: flex;
        justify-content: space-between;
        padding: upx(8);

        .icon-wrap {
          width: upx(80);
          height: upx(80);
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);
          border-radius: 50%;
        }

        .ico-beans {
          width: upx(44);
          height: upx(38);
        }
      }

      .poster-wrap {
        position: relative;
        width: upx(550 + 120);
        height: upx(620-80-40);
        margin: upx(240) auto upx(100);
        border-radius: upx(32);
        background: #F1F3F6;

        .center-wrap {
          position: absolute;
          width: upx(550 + 60);
          height: upx(628);
          left: 0;
          right: 0;
          margin: upx(-60) auto;
          border-radius: upx(32);
          background: #DFE3EB;

          .poster {
            position: absolute;
            left: 0;
            right: 0;
            margin: upx(-60) auto;
            width: upx(550);
            height: upx(730);
            border-radius: upx(32);
            overflow: hidden;
          }

          .use-poster {
            width: upx(550);
            height: upx(730);
            border-radius: upx(32);
            overflow: hidden;
            background: #c9cbce;

            &.hide {
              position: absolute;
              top: -10000px;
            }
          }

          .footer {
            width: 100%;
            height: upx(84);
            padding: upx(18) upx(32);
            position: absolute;
            bottom: 0;
            box-sizing: border-box;

            display: flex;
            align-items: center;
            justify-content: flex-end;

            .again {
              width: upx(192);
              height: upx(52);
            }

            .question {
              @include ft(32, #fff, 500);
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              max-width: upx(436);
            }

            .ico_voice_d {
              margin-right: upx(24);
              width: upx(48);
              height: upx(48);
            }
          }
        }
      }

      .next {
        width: upx(570);
        justify-content: center;
        align-items: center;
        display: flex;
        margin: auto;

        .fiddle {
          margin-top: upx(-0);
        }
      }

      .btn-rec {
        text-align: center;

        &-ico {
          width: upx(142);
          height: upx(142);
        }

        p {
          margin-top: upx(-30);
          @include ft(28, #C7CCD5, 500)
        }
      }

      .ico-s {
        width: upx(258) !important;
        height: upx(258) !important;
      }




      .btn-rec {
        text-align: center;

        &-ico {
          width: upx(142);
          height: upx(142);
        }

        p {
          padding-top: upx(16);
          @include ft(28, #C7CCD5, 500)
        }
      }
    }
  }
</style>
